<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>VUE学习 - 数据请求</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--载入vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="Application">
        <div v-for="itm in data">
            <ul>
                <li>
                    id：{{itm.id}} <br />
                    书名：{{itm.bookname}}<br />
                    作者：{{itm.author}}<br />
                    出版社：{{itm.publisher}}<br />
                </li>
            </ul>

        </div>

    </div>
    <script>
        const app = Vue.createApp({
            setup() {
                const data = Vue.ref("");
                axios({
                    method: 'get',
                    url: 'http://localhost:3000/api/getbooks'
                })
                    .then(response => {
                        console.log(response)
                        data.value = response.data.data;
                    })

                return { data };

            },
        })

        app.mount("#Application")
    </script>

</body>

</html>